<template>
  <common-page :title="isTitle ? '编辑资产类型' : '新增资产类型'">
    <div slot="header">
      <el-button @click="goBack">返回</el-button>
      <el-button @click="submit" :loading="loading" type="primary"
        >保存
      </el-button>
    </div>
    <div slot="content" class="common-page-content">
      <el-form
        :model="form"
        ref="form"
        :inline="true"
        label-width="110px"
        :rules="rules"
        @submit.native.prevent
      >
        <common-group-title title="基本信息"></common-group-title>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="资产类型" prop="categoryCode">
              <el-cascader
                style="width: 100%"
                v-model="form.categoryCode"
                clearable
                :options="treeList"
                :props="props"
                :show-all-levels="false"
                :disabled="isTitle"
              >
                <template slot-scope="{ node, data }">
                  <common-carousel-text
                    :content="data.name"
                    :fontSize="14"
                    :keyWord="data.id"
                  ></common-carousel-text>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="厂家" prop="factory">
              <el-select placeholder="请选择" filterable
                         clearable v-model="form.factory">
                <el-option
                    v-for="(item, index) in factoryList"
                    :key="index"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="12">
            <el-form-item label="资产类型编码" prop="categoryThirdCode">
              <common-input
                  clearable
                  v-model="form.categoryThirdCode"
                  placeholder="请输入"
                  :maxlength="32"
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="资产类型名称" prop="categoryThirdName">
              <common-input
                clearable
                v-model="form.categoryThirdName"
                placeholder="请输入"
                :disabled="assetName"
                :maxlength="16"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="采集类型" prop="collectionType">
              <el-select
                placeholder="请选择"
                filterable
                clearable
                v-model="form.collectionType"
              >
                <el-option label="Syslog" value="Syslog"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字符编码" prop="characterEncode">
              <el-select
                placeholder="请选择"
                filterable
                clearable
                v-model="form.characterEncode"
              >
                <el-option label="utf-8" value="utf-8"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="解析分组" prop="parseGroup">
              <el-cascader
                style="width: 100%"
                :clearable="false"
                :options="groupList"
                v-model="form.parseGroup"
                :show-all-levels="false"
                :props="{
                  multiple: true,
                  checkStrictly: true,
                  emitPath: false,
                  label: 'name',
                  value: 'id',
                }"
                @change="changeParseGroup"
                popper-class="parseClass"
              >
                <template slot-scope="{ node, data }">
                  <common-carousel-text
                    :content="data.name"
                    :keyWord="data.id"
                  ></common-carousel-text>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="24">-->
          <!--            <el-form-item label="日志配置过滤" prop="logFilterConfig">-->
          <!--              <common-input-->
          <!--                type="textarea"-->
          <!--                clearable-->
          <!--                style="width: 100%"-->
          <!--                v-model="form.logFilterConfig"-->
          <!--                placeholder="请输入"-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="24">-->
          <!--            <el-form-item label="日志配置合并" prop="logMergeConfig">-->
          <!--              <div style="width: 100%; height: 120px">-->
          <!--                <code-editor-->
          <!--                  key="alarm-template-editor"-->
          <!--                  v-model="form.logMergeConfig"-->
          <!--                  :variable="variable"-->
          <!--                  placeholder="变量示例: &{userName}; 只支持英文状态的&符号"-->
          <!--                ></code-editor>-->
          <!--              </div>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <common-input
                type="textarea"
                clearable
                style="width: 100%"
                v-model="form.remark"
                placeholder="请输入"
                :maxlength="256"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </common-page>
</template>

<script>
import {
  assetsTypeAdd,
  assetsTypeEdit,
  getFactory,
  getGrouping,
  getInfo,
  getTreeData,
  queryAssetCategoryTree,
} from "@/api/analysisCenter/assetsType";
import CodeEditor from "@/components/CodeEditor";

export default {
  name: "add",
  components: {
    CodeEditor,
  },
  props: {
    isTitle: {
      type: Boolean,
      default: null,
    },
    assetsData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      props: {
        label: "name",
        value: "id",
      },
      treeList: [],
      assetName: false,
      flag: true,
      groupList: [],
      loading: false,
      factoryList: [],
      form: {
        categoryCode: [],
        categoryConfigId: null,
        categorySecondCode: null,
        factory: null,
        categoryThirdCode: null,
        logFilterConfig: null,
        logMergeConfig: null,
        remark: null,
        parseGroup: null,
        collectionType: null,
        characterEncode: null,
        parentId: null,
        categoryId: null,
        categoryThirdName: null,
        isDefault: 0,
      },
      rules: {
        categoryThirdCode: [
          { required: true, message: "请输入资产类型编码", trigger: "blur" },
        ],
        categoryThirdName: [
          { required: true, message: "请输入资产类型名称", trigger: "blur" },
        ],
        categoryCode: [
          { required: true, message: "请选择资产类型", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    changeParseGroup() {},
    queryTree() {
      this.treeLoading = true;
      queryAssetCategoryTree().then((res) => {
        if (res && res.code === 200) {
          // console.log(res.data);
          this.getTreeList(res.data);
        } else {
          this.treeList = [];
        }
      });
    },
    getTreeList(data) {
      data.forEach((item) => {
        if (item.children.length !== 0) {
          item.disabled = false;
          item.children.forEach((t) => {
            if (t.children.length === 0) {
              t.disabled = false;
              t.children = null;
            }
          });
        } else {
          item.disabled = true;
          item.children = null;
        }
      });
      this.treeList = [
        {
          name: "资产类别",
          id: "0",
          isDefault: 0, // 0 自定义
          children: data,
        },
      ];
    },

    getInfoById(categoryConfigId) {
      getInfo({ categoryConfigId }).then((res) => {
        if (res && res.code === 200) {
          Reflect.ownKeys(this.form).forEach(
            (k) => (this.form[k] = res.data[k])
          );
          this.form.parseGroup = res.data.parseGroup
            ? res.data.parseGroup.split(",")
            : "";
          this.form.categoryCode = [];
          this.form.categoryCode.push(
            "0",
            this.form.parentId,
            res.data.categoryId
          );
          this.assetName = this.form.isDefault === 1;
        }
      });
    },

    goBack() {
      this.$emit("closeView");
    },
    getData() {
      if (this.isTitle) {
        //编辑
        Reflect.ownKeys(this.form).forEach(
          (k) => (this.form[k] = this.assetsData[k])
        );
        this.form.parseGroup = this.assetsData.parseGroup
          ? this.assetsData.parseGroup.split(",")
          : "";
        this.form.categoryCode = [];
        this.form.categoryCode.push(
          "0",
          this.form.parentId,
          this.assetsData.categoryId
        );
        this.assetName = this.form.isDefault === 1;
      } else {
        //新增
        this.reset();
        this.assetName = false;
        this.form.categoryCode = [];
        if (this.assetsData.parentId && this.assetsData.parentId !== "0") {
          this.form.categoryCode.push(
            "0",
            this.assetsData.parentId,
            this.assetsData.categoryId
          );
        }
      }
    },
    //提交
    submit() {
      if (this.form.categoryCode && this.form.categoryCode.length !== 0) {
        this.form.categoryId = this.form.categoryCode[2];
        this.form.parentId = this.form.categoryCode[1];
        if (
          this.treeList.length &&
          this.treeList[0].children &&
          this.treeList[0].children.length
        ) {
          this.treeList[0].children.forEach((item) => {
            if (item.children && item.children.length) {
              item.children.forEach((t) => {
                if (t.id === this.form.categoryCode[2]) {
                  this.form.categorySecondCode = t.name;
                }
              });
            }
          });
        }
      } else {
        this.form.categoryId = "";
        this.form.parentId = "";
        this.form.categorySecondCode = "";
      }
      this.form.parseGroup =
        this.form.parseGroup && this.form.parseGroup.length > 0
          ? this.form.parseGroup.join(",")
          : "";
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.isTitle) {
            assetsTypeEdit(this.form).then((res) => {
              if (res && res.code === 200) {
                this.$emit("submitForm");
                this.$GlobalSuccessMessage("编辑成功");
              } else {
                this.$GlobalErrorConfirm("编辑失败", res.msg);
              }
            });
          } else {
            assetsTypeAdd(this.form)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$emit("submitForm");
                  this.$GlobalSuccessMessage("新增成功");
                } else {
                  this.$GlobalErrorConfirm("新增失败", res.msg);
                }
              })
              .finally(() => {
                this.loading = false;
              });
          }
        }
      });
    },

    reset() {
      this.form.categorySecondCode = "";
      this.form.factory = "";
      this.form.logFilterConfig = "";
      this.form.logMergeConfig = "";
      this.form.remark = "";
      this.form.parseGroup = "";
      this.form.collectionType = "";
      this.form.characterEncode = "";
      this.categoryThirdCode = "";
      this.categoryThirdName = "";
    },
    // getAssetsTypeFactory() {
    //   //厂家下拉
    //   getFactory().then((res) => {
    //     if (res && res.code === 200) {
    //       this.factoryList = res.data
    //     } else {
    //       this.factoryList = []
    //     }
    //   })
    // },
    // 解析分组下拉
    getGrouping() {
      getGrouping().then((res) => {
        let dataArr = [];
        if (res && res.code === 200) {
          dataArr = res.data;

          function handle(data) {
            data.forEach((item) => {
              if (item.children && item.children.length === 0) {
                item.children = null;
              } else {
                handle(item.children);
              }
            });
          }

          handle(dataArr);
          dataArr.forEach((item) => {
            item.disabled = true;
            if (item.children != null) {
              item.children.forEach((t) => {
                t.disabled = true;
              });
            }
          });
        }

        this.groupList = [
          {
            name: "资产类别",
            id: "0",
            disabled: true,
            isDefault: 0, // 0 自定义
            children: dataArr,
          },
        ];
      });
    },
  },

  mounted() {
    this.getData();
    this.getGrouping();
    // this.getAssetsTypeFactory()
    this.queryTree();
  },
};
</script>

<style scoped lang="scss">
::v-deep .common-page-content {
  overflow-y: scroll !important;

  .common-page-content {
    width: 50%;
    margin: 0 auto;
  }
}

.el-form-item {
  width: 100%;

  ::v-deep .el-form-item__content {
    width: calc(100% - 110px) !important;
  }
}
</style>

<style lang="scss">
.parseClass {
  .is-disabled.el-checkbox {
    display: none;
  }
}
</style>
